<template>
  <div>
    <div>
      <!-- 左分类 -->
      <van-sidebar v-model="activeKey" style="float: left">
        <van-sidebar-item
          v-for="item in rootList"
          :key="item.id"
          :title="item.name"
          @click="selectRootCategory(item.id)"
        />
      </van-sidebar>
      <!-- 右分类 -->
      <van-grid class="grid" :column-num="3" :border="false">
        <van-grid-item v-for="item in currentSubList" :key="item.id">
          <router-link :to="{ name: 'CategoryList', query: { id: item.id } }">
            <div class="images">
              <img :src="item.img" class="imgs" />
            </div>
            <div>{{ item.name }}</div></router-link
          >
        </van-grid-item>
      </van-grid>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
export default {
  name: "Category",
  components: { navBar },
  data() {
    return {
      rootList: [],
      allSubList: [],
      currentSubList: [],
      activeKey: 0,
    };
  },
  created() {
    this.getAllCategory();
  },
  methods: {
    getAllCategory() {
      this.$http.get("category/all").then((res) => {
        this.rootList = res.data.roots;
        this.allSubList = res.data.subs;
        this.selectRootCategory(this.rootList[0].id);
      });
    },
    selectRootCategory(rootId) {
      this.currentSubList = this.allSubList.filter(
        (item) => item.parentId === rootId
      );
    },
  },
};
</script>

<style  scoped>
.images {
  height: 60px;
}
.images img {
  max-width: 60px;
  max-height: 50px;
}
a {
  text-decoration: none;
  color: black;
}
.grid {
  padding-top: 13px;
  margin: 5px 5px;
  height: 140px;
}
</style>